<template>
  <el-container class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" style="width: 800px">

      <el-form-item prop="mainUrl" label="办公空间图片:">
        <img-upload class="form-pic" @upload-callback="handleUpload(arguments[0],{name:'mainUrl'})"
                    :imageUrl="form.mainUrl" uploadFrom="operation"></img-upload>
      </el-form-item>
      <el-form-item prop="productName" label="会议室名称:">
        <el-input v-model.trim="form.productName"></el-input>
      </el-form-item>
      <el-form-item prop="intro" label="面积（㎡）:">
        <el-input v-model.trim="form.intro"></el-input>
      </el-form-item>
      <el-form-item prop="intro" label="收费（元/小时）:">
        <el-input v-model.trim="form.intro"></el-input>
      </el-form-item>

      <el-form-item prop="intro" label="最小预定时间（小时）:">
        <el-input v-model.trim="form.intro"></el-input>
      </el-form-item>
      <el-form-item prop="intro" label="所属的空间:">
        <el-input v-model.trim="form.intro"></el-input>
      </el-form-item>
      <el-form-item prop="intro" label="场地地址:">
        <el-input v-model.trim="form.intro"></el-input>
      </el-form-item>
      <el-form-item prop="open" label="开放时间:">
        <el-select v-model="form.open" placeholder="请选择" style="">
          <el-option
            v-for="item in openTimeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-row v-if="form.open==='0'" class="m-t-10">
          <el-time-picker style="width: 200px"
                          v-model="form.value1"
                          :picker-options="selectableRange"
                          placeholder="任意时间点">
          </el-time-picker>
          -
          <el-time-picker style="width: 200px"
                          v-model="form.value2"
                          :picker-options="selectableRange"
                          placeholder="任意时间点">
          </el-time-picker>
        </el-row>


      </el-form-item>
      <el-form-item prop="intro" label="场地介绍及服务:">
        <el-input v-model.trim="form.intro" type="textarea"></el-input>
      </el-form-item>
      <el-form-item prop="intro" label="特别说明:">
        <el-input v-model.trim="form.intro" type="textarea"></el-input>
      </el-form-item>
      <el-form-item prop="memo" label="备注:">
        <el-input v-model.trim="form.memo" type="textarea"></el-input>
      </el-form-item>
      <el-form-item prop="name" label="状态：">
        <el-radio-group v-model="form.enable">
          <el-radio :label="1">正常开放</el-radio>
          <el-radio :label="0">停用</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="()=>{this.$router.go(-1)}">取消</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
  import ImgUpload from '@/components/ImgUpload'

  // import pageApi from '@/api/courseManage/monthAgeIntro'

  export default {
    name: 'add',
    components: {
      ImgUpload
    },
    data() {
      const monthAgeValidator = (rule, value, callback) => {
        if (!value.toString() || !this.form.endMonthAge.toString()) {
          callback(new Error('请选择完整的月龄范围'))
        } else {
          callback()
        }
      }
      return {
        selectableRange: {
          selectableRange: '18:30:00 - 20:30:00'
        },
        openTimeOptions: [{
          label: '每天',
          value: '0',
        }, {
          label: '法定工作日（智能跳过节假日）',
          value: '1',
        }, {
          label: '周一至周五',
          value: '2',
        }, {
          label: '自定义',
          value: '3',
        }],
        cateOptions: [],
        uploadType: {
          type: 'music',
          from: 'music'
        },
        monthOptions: this.$const.MONTH_OPTION(35),
        form: {
          mainUrl:'',
          open: '0',
          monthAgeContentId: null,
          name: '',
          monthAge: '',
          endMonthAge: '',
          content: ''
        },
        rules: {
          name: [
            {required: true, trigger: 'blur', message: '名称不能为空'},
            {min: 1, max: 20, message: '长度不能超过20个汉字'}
          ],
          monthAge: [{required: true, trigger: 'blur', validator: monthAgeValidator}],
          content: [{required: true, trigger: 'blur', message: '请填写内容'}]
        }

      }
    },
    methods: {
      handleUpload(url, obj) {
        this.form[obj.name] = url
      },
      handleRes(res) {
        let _this = this
        if (res.code === '200') {
          _this.$message.success(res.message)
          _this.$router.go(-1)
        } else {
          _this.$message.error(res.message)
        }
      },
      onSubmit() {
        let _this = this
        let {monthAgeContentId} = _this.$route.query
        _this.$refs['form'].validate((valid) => {
          if (valid) {
            if (!monthAgeContentId) {
              pageApi.create(_this.form).then((res) => {
                _this.handleRes(res)
              })
            } else {
              pageApi.update(_this.form).then((res) => {
                _this.handleRes(res)
              })
            }

          } else {
            return false
          }
        })
      },
      backClick() {
        this.$router.go(-1)
      },
      getById(id) {
        pageApi.getById(id).then(res => {
          setTimeout(() => {
            this.form = Object.assign({}, this.form, res.body)
          }, 0)
        })
      },
    },
    created: function () {
      let {monthAgeContentId} = this.$route.query
      if (monthAgeContentId) {
        this.form.monthAgeContentId = monthAgeContentId
        this.getById(monthAgeContentId)
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
